<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            路由传参的两种方式: 1、通过路径参数(Route Paramas)
                            2、通过查询参数(Query Paramas) 


            1 第一种
            const routes = [
                { path:'/user/:id', component: User }  id是动态参数它会匹配 /user/123 或 /user/abc 等路径，并将 id 的值作为参数传递给组件
            ]

            路径参数 编程式导航传参时
                1 直接在路径中指定
                this.$router.push({ path:'/user/123' })
                2 或者更灵活的方式 对象形式
                this.$router.push({ name:'user', paramas:{ id: 123 } })

                export default {--访问
                    mounted(){
                            // params
                        console.log(this.$route.params.id)
                    }
                }

            2
            export default {--访问
                mounted(){
                    // query
                    console.log(this.$route.query.name)
                }
            }

            编程式导航传参时
                this.$router.push({ path:'/user/123' })
                或者更灵活的方式
                this.$router.push({ name:'user', query:{ name: 'Vue' } })
        */ 

        // 1 路径参数
        const routes = [
            { path:'/user/:id', component: User }   //id是动态参数它会匹配 /user/123 或 /user/abc 等路径，并将 id 的值作为参数传递给组件
        ]

        // -1 直接在路径中指定
        this.$router.push({ path:'/user/123' })
        // -2 或者更灵活的方式 对象形式
        this.$router.push({ name:'user', paramas:{ id: 123 } })

        export default {
            props:[id], // 如果启动了 props:true,可以直接作为组件的 prop接收
            mounted(){
                    // params
                console.log(this.$route.params.id)
            }
        }

        // 2 查询参数

        this.$router.push({ path: '/home', query: { name: 'Vue' }});

        // export default {
        //     mounted() {
        //         console.log(this.$route.query.name); // 如果URL是 /home?name=Vue 则输出 'Vue'
        //     }
        // }

        // 3、props
        const routes2 = [
            { path: '/user/:id', component: User, props: true },
            { path: '/static', component: StaticComponent, props: { message: 'Hello from props!' }}
        ]

        // export default {
        //     props: ['id', 'message'], // 对于动态路由参数或静态props
        //     mounted() {
        //         console.log(this.id); // 动态路由参数
        //         console.log(this.message); // 静态props
        //     }
        // }
    </script>
</body>
</html>